// 把不同的工作放到不同的方法中
class ChinaMap{
    constructor(){
        console.log('实例化');
        //统一方案
        this.cube=null;//属性
        this.init();//执行流程的管理方法
    }
    init(){
        //三个对象的实例化过程放在这里
        this.scene = new THREE.Scene;
        this.setCamera();
        this.setRenderer();
        const geometry =new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        this.cube = new THREE.Mesh(geometry, material);
        this.scene.add(this.cube)
        this.render()
        //动起来
        this.animate()
    }

    setCamera(){
        this.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          )
        //未来这里很精彩
        this.camera.position.z=2;
        // this.camera.position.x=1;
        // this.camera.position.y=1;
    }

    setRenderer() {
        this.renderer = new THREE.WebGLRenderer()
        // 设置画布的大小
        this.renderer.setSize(window.innerWidth, window.innerHeight)
        //这里 其实就是canvas 画布  renderer.domElement
        document.body.appendChild(this.renderer.domElement)
    }

    //向外输出scene
    render(){
        this.renderer.render(this.scene, this.camera)
    }

    animate(){
        //一直执行
        requestAnimationFrame(this.animate.bind(this))
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
        this.render()
    }
}